.li-none {
  list-style-type: none;
}

// 用户无法选择
.no-select {
  user-select: none;
}

// 超出省略号
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// ie盒子
.ie-box {
  box-sizing: border-box;
}

// 无法缩放
.no-resize {
  resize: none;
}

// 圆角
.border-circle {
  border-radius: 50%;
}

// 带tabs的抽屉 底部都固定操作栏
.wxt-tabs-drawer {
  .el-drawer__header {
    padding: 16px 24px 8px;
    margin: 0;
    span {
      color: #333333;
      font-weight: 500;
    }
  }
  .el-tabs {
    &__nav {
      flex: 1;
      display: flex;
    }
    &__header {
      margin: 0;
    }
    &__content {
      height: calc(100vh - 139px);
      padding-top: 24px;
      box-sizing: border-box;
      overflow: auto;
    }
    &__nav-scroll {
      display: flex;
      justify-content: center;
    }
    &__item {
      width: 20%;
      text-align: center;
    }
  }
  .el-form-item__content > div {
    width: 100%;
    max-width: 220px;
  }
  &__footer {
    height: 52px;
    padding: 0 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.09);
    box-sizing: border-box;
  }
}
.wxt-drawer-header-border {
  .el-drawer__header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  }
}

.flex-1 {
  flex: 1;
}

// flex 不允许被压缩
.shrink-0 {
  flex-shrink: 0;
}
// 垂直居中
.flex-center {
  display: flex;
  align-items: center;
}
.hover-opacity:hover {
  opacity: 0.8;
}

.events-none {
  pointer-events: none;
}

// 分割线
.wxt-divider {
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.1);
  &-vertical {
    height: 100%;
    width: 1px;
    background-color: rgba(0, 0, 0, 0.1);
  }
}

.wxt-scrollbar--hidden {
  overflow: -moz-scrollbars-none;
  &::-webkit-scrollbar {
    width: 0 !important;
  }
}

.message-box {
  .el-message-box__status {
    top: 0;
    transform: translateY(0);
  }
  .message-box__confirmbtn {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid #d9d9d9;

    color: #f5222d;
    &:hover {
      background: rgba(0, 0, 0, 0.04);
      border: 1px solid #d9d9d9;

      color: #f5222d;
    }
  }
}

$_provider_dialog: (45, 55, 62);
$base_vh: 1vh;
// dialog-height
@each $Key in $_provider_dialog {
  .vh#{ $Key }-scroll-dialog {
    .el-dialog__body {
      max-height: $Key * $base_vh;
      overflow-y: auto;
      border-bottom: 1px solid rgba(0, 0, 0, 0.09);
      &::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }

      &::-webkit-scrollbar-thumb {
        border-radius: 8px;
        background-color: hsla(220, 4%, 58%, 0.3);
        transition: background-color 0.3s;

        &:hover {
          background: #bbb;
        }
      }

      &::-webkit-scrollbar-track {
        background: #ededed;
      }
    }
  }
}

.w-220 {
  width: 220px;
}

.wb-keep {
  word-break: keep-all;
}
.scroll-y {
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  &::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
}

.border-none {
  border: none;
}

.data-screen__select-popper {
  background: #0c2c65;
  border-radius: 2px 2px 2px 2px;
  border: 1px solid #2c71cf;
  color: #fff;

  .el-select-dropdown__item {
    color: #fff;
    &.selected {
      color: #66ffff;
      background: linear-gradient(
        270deg,
        rgba(41, 161, 209, 0.6) 0%,
        rgba(41, 161, 209, 0) 100%
      );
    }
    &.hover {
      background: linear-gradient(
        270deg,
        rgba(41, 161, 209, 0.6) 0%,
        rgba(41, 161, 209, 0) 100%
      );
    }
  }

  .popper__arrow {
    display: none;
  }
}
